<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pgwatch2 :: Overview</title>
    <link rel="stylesheet" href="/static/bootstrap-4.3.1-dist/css/bootstrap.min.css">
  </head>

  <body>

  <div class="container-fluid">

    <nav class="navbar navbar-expand-md navbar-light bg-light mb-2">

      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="/"><h4>pgwatch2</h4></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://www.cybertec-postgresql.com/en/"><img src="/static/logo.png" alt="Cybertec logo" height="40px"></a>
        </li>
      </ul>

      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="/dbs">DBs</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/metrics">Metric definitions</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="/stats-summary" title="Hint - Grafana is the preferred metrics browser">Stats summary</a>
        </li>
        {% if not no_component_logs %}
        <li class="nav-item dropdown" title="Logs will open in a new window">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">Logs</a>
          <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="/logs/pgwatch2/200" target="_blank">Pgwatch2 [last 200 lines]</a>
            <a class="dropdown-item" href="/logs/influxdb/200" target="_blank">InfluxDB [last 200 lines]</a>
            <a class="dropdown-item" href="/logs/grafana/200" target="_blank">Grafana [last 200 lines]</a>
            <a class="dropdown-item" href="/logs/postgres/200" target="_blank">Postgres [last 200 lines]</a>
            <a class="dropdown-item" href="/logs/webui/200" target="_blank">Web UI [last 200 lines]</a>
            <a class="dropdown-item" href="/versions" target="_blank">Component versions</a>
          </div>
        </li>
        {% endif %}

        {% if no_anonymous_access and session['logged_in'] %}
        <li class="nav-item">
          <a class="nav-link" href="/logout">Logout</a>
        </li>
        {% endif %}

      </ul>
    </nav>

  </div>

    <div class="container-fluid">

      {% if messages %}
        {% for message in messages: %}
        <div class="row">
          <div class="col alert alert-warning alert-dismissible fade show" role="alert">
            {{message}}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        </div>
        {% endfor %}
      {% endif %}

      <div class="row" style="padding-left: 10px">


        <div class="col-sm-2 sidebar" style="margin-top: 30px">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link" href="/stats-summary">Overview</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/stats-summary?page=statements">pg_stat_statements report</a>
            </li>
          </ul>
        </div>

        <div class="col-sm-10 main">

          {% if page == 'stats-summary' %}

            <h2 class="sub-header">DB overview {% if dbname %}for "{{dbname}}"{% endif %} (based on metrics stored in {{datastore}})</h2>
            <form action="/stats-summary" method="get">
            <select name="dbname">
              <option></option>
              {% for db in dbnames  %}
              <option value="{{db}}" {% if db == dbname %}selected{% endif %}>{{db}}</option>
              {% endfor %}
            </select>
            <input type="submit" name="show" value="Show">
            </form>
            {% if data %}
            <div class="table-responsive">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>Attribute</th>
                    <th>Last 7d avg</th>
                    <th>Last 24h avg</th>
                    <th>Last 1h avg</th>
                  </tr>
                </thead>
                <tbody>
                  {% for key, values in data  %}
                  <tr>
                      <td>{{key}}</td>
                      <td>{{values[0]}}</td>
                      <td>{{values[1]}}</td>
                      <td>{{values[2]}}</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
            {% endif %}

          {% elif page == 'statements' %}

            <h2 class="sub-header">pg_stat_statements Top 50 by {{sort_column}} {% if dbname %}for "{{dbname}}"{% endif %} (based on metrics stored in {{datastore}})</h2>
            <form action="/stats-summary" method="get">
            <input type="hidden" name="page" id="page" value="statements">
            <input type="hidden" name="sort_column" id="sort_column" value="{{sort_column}}">
            <select name="dbname">
              <option></option>
              {% for db in dbnames  %}
              <option value="{{db}}" {% if db == dbname %}selected{% endif %}>{{db}}</option>
              {% endfor %}
            </select>
            From: <input type="text" name="start_time" id="start_time" value="{{start_time}}" size="28" title="Time has to be in ISO-8601 format (UTC)">
            To: <input type="text" name="end_time" id="end_time" value="{{end_time}}" size="28" title="Time has to be in ISO-8601 format (UTC)">
            <input type="submit" name="show" value="Show">
            <span style="margin-left: 20px">
              <!-- <button type="button" class="btn btn-link">Link</button> -->
              <a href="#" id="1h">1h</a>&nbsp;|
              <a href="#" id="3h">3h</a>&nbsp;|
              <a href="#" id="6h">6h</a>&nbsp;|
              <a href="#" id="12h">12h</a>&nbsp;|
              <a href="#" id="1d">1d</a>&nbsp;|
              <a href="#" id="1w">1w</a>&nbsp;|
              <a href="#" id="1m">1m</a>
            </span>
            </form>
            {% if data %}
            <div class="table-responsive">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th title="Click to view in Grafana">queryid</th>
                    <th title="In normalized form (spaces removed etc)">query</th>
                    <th title="In milliseconds. Click to sort"><a class="sort_column" href="">total_time</a></th>
                    <th title="In milliseconds. Click to sort"><a class="sort_column" href="">mean_time</a></th>
                    <th title="Click to sort"><a class="sort_column" href="">calls</a></th>
                    <th title="Click to sort"><a class="sort_column" href="">shared_blks_hit</a></th>
                    <th title="Click to sort"><a class="sort_column" href="">shared_blks_read</a></th>
                    <th title="Click to sort"><a class="sort_column" href="">shared_blks_written</a></th>
                    <th title="Click to sort"><a class="sort_column" href="">temp_blks_read</a></th>
                    <th title="Click to sort"><a class="sort_column" href="">temp_blks_written</a></th>
                    <th title="In milliseconds. Click to sort"><a class="sort_column" href="">blk_read_time</a></th>
                    <th title="In milliseconds. Click to sort"><a class="sort_column" href="">blk_write_time</a></th>
                  </tr>
                </thead>
                <tbody>
                  {% for d in data %}
                  <tr>
                    <td><a href="{{grafana_baseurl}}/d/single-query-details/single-query-details?var-queryid={{d['queryid']}}&var-dbname={{dbname}}" target="_blank">{{d['queryid']}}</td>
                    <td>{{d['query']}}</td>
                    <td>{{d['total_time']}}</td>
                    <td>{{d['mean_time']}}</td>
                    <td>{{d['calls']}}</td>
                    <td>{{d['shared_blks_hit']}}</td>
                    <td>{{d['shared_blks_read']}}</td>
                    <td>{{d['shared_blks_written']}}</td>
                    <td>{{d['temp_blks_read']}}</td>
                    <td>{{d['temp_blks_written']}}</td>
                    <td>{{d['blk_read_time']}}</td>
                    <td>{{d['blk_write_time']}}</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
            {% endif %}

          {% endif %}

        </div>
      </div>
    </div>


    <script src="/static/jquery-3.5.1.min.js"></script>
    <script src="/static/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

    <script>
      function getLocalTimeWithSecondsToZero() {
          var d = new Date();
          d.setMilliseconds(0);
          d.setSeconds(0);
          return d;
      }

      $(document).ready(function(){
          $(".sort_column").click(function(event){
              event.preventDefault();

              $('#sort_column').val($(this).html());
              document.forms[0].submit();

          });

          if ($("#start_time").val() == '' ) {
            var d = getLocalTimeWithSecondsToZero();
            d.setHours(d.getHours()-1)
            $("#start_time").val(d.toISOString());
          }

          $("#1h").click(function(event){
              event.preventDefault();
              var d = getLocalTimeWithSecondsToZero();
              d.setHours(d.getHours()-1)
              $("#start_time").val(d.toISOString());
          });
          $("#3h").click(function(event){
              event.preventDefault();
              var d = getLocalTimeWithSecondsToZero();
              d.setHours(d.getHours()-3)
              $("#start_time").val(d.toISOString());
          });
          $("#6h").click(function(event){
              event.preventDefault();
              var d = getLocalTimeWithSecondsToZero();
              d.setHours(d.getHours()-6)
              $("#start_time").val(d.toISOString());
          });
          $("#12h").click(function(event){
              event.preventDefault();
              var d = getLocalTimeWithSecondsToZero();
              d.setHours(d.getHours()-12)
              $("#start_time").val(d.toISOString());
          });
          $("#1d").click(function(event){
              event.preventDefault();
              var d = getLocalTimeWithSecondsToZero();
              d.setDate(d.getDate()-1)
              $("#start_time").val(d.toISOString());
          });
          $("#1w").click(function(event){
              event.preventDefault();
              var d = getLocalTimeWithSecondsToZero();
              d.setDate(d.getDate()-7)
              $("#start_time").val(d.toISOString());
          });
          $("#1m").click(function(event){
              event.preventDefault();
              var d = getLocalTimeWithSecondsToZero();
              d.setMonth(d.getMonth()-1)
              $("#start_time").val(d.toISOString());
          });
      });
    </script>
  </body>
</html>
